Day25 前端可以做到的 SEO

第 11 屆 iThome 鐵人賽

DAY 25

Modern Web

深入現代前端開發系列第 25 篇

11th鐵人賽

愷開

2019-09-26 22:07:58

5028 瀏覽

分享至

要做 SEO 有很多眉角，今天來介紹一些常見的方式與可以注意的地方。

`<head>`

在 head 當中，我們可以定義許多標籤讓搜尋引擎方便拿到資料，例如：

<title></title> 可以定義網頁的標題，會顯示在搜尋結果的標題
<meta></meta>：在 meta 可以放置許多跟網站有關的資訊，例如 keyword, description 等，但似乎對 SEO 的權重越來越小了。
Open Graph：像是在實作 facebook, twitter 等分享連結網站時顯示的文字與圖片等。常見的有 og:title, og:type, og:image 等等。

Semantic Tag

HTML 標籤雖然看起來只是個標籤，技術上來說也可以從頭用 <div> 做到尾，但對瀏覽器、閱讀器、以及 Voice Reader 來說，如果能用符合語意的標籤的話，除了提升可讀性之外，對搜尋引擎及閱讀器來說也更容易解析與理解。

例如在 HTML 就有 <section>、<header>、<nav>、<a>、<button>、<summary> 、<table> 、<article> 等等豐富的標籤可供使用，可以讓整個組織看起來更一目瞭然。當然，對於前端開發來說似乎太理想，總是會有「這個元件該用哪個 tag 表達才好？」、「要用 h2 還是 h4？」等等的問題。也不需要過往矯正，看到 div 或 span 就好像十惡不赦一樣。

itemscope

這是在 HTML5 之後引入的新標準，目的是為了讓搜尋引擎更容易解析內容。在 html 當中，你可以用 itemscope 以及 itemprop 來定義一些屬性，目前 Google、Yahoo! 等搜尋引擎都有支援。

例如在搜尋書籍的時候，有時會看到搜尋結果有星星評價，雖然不一定是透過 itemscope 產生，但如果有定義的話可以幫助搜尋引擎更快解析資料也說不定。

在 schema.org 有定義各種 type 與可以設定的欄位，方便各大廠商跟著標準實作。

<p>
This example shows the addition of Accessibility metadata. Although these properties are not
a formal enumeration, there is evolving consensus amongst accessibility experts for
appropriate values for these properties. This example shows simple text values,
as suggested by www.a11ymetadata.org.
</p>
<div itemscope="" itemtype="http://schema.org/Book">
   <meta itemprop="bookFormat" content="EBook/DAISY3"/>
   <meta itemprop="accessibilityFeature" content="largePrint/CSSEnabled"/>
   <meta itemprop="accessibilityFeature" content="highContrast/CSSEnabled"/>
   <meta itemprop="accessibilityFeature" content="resizeText/CSSEnabled"/>
   <meta itemprop="accessibilityFeature" content="displayTransformability"/>
   <meta itemprop="accessibilityFeature" content="longDescription"/>
   <meta itemprop="accessibilityFeature" content="alternativeText"/>
   <meta itemprop="accessibilityControl" content="fullKeyboardControl"/>
   <meta itemprop="accessibilityControl" content="fullMouseControl"/>
   <meta itemprop="accessibilityHazard" content="noFlashingHazard"/>
   <meta itemprop="accessibilityHazard" content="noMotionSimulationHazard"/>
   <meta itemprop="accessibilityHazard" content="noSoundHazard"/>
   <meta itemprop="accessibilityAPI" content="ARIA"/>
   <dl>
      <dt>Name:</dt>
      <dd itemprop="name">Holt Physical Science</dd>
      <dt>Brief Synopsis:</dt>
      <dd itemprop="description">NIMAC-sourced textbook</dd>
      <dt>Long Synopsis:</dt>
      <dd>N/A</dd>
      <dt>Book Quality:</dt>
      <dd>Publisher Quality</dd>
      <dt>Book Size:</dt>
      <dd><span itemprop="numberOfPages">598</span> Pages</dd>
      <dt>ISBN-13:</dt>
      <dd itemprop="isbn">9780030426599</dd>
      <dt>Publisher:</dt>
      <dd itemprop="publisher" itemtype="http://schema.org/Organization" itemscope=""><span itemprop="name">Holt, Rinehart and Winston</span></dd>
      <dt>Date of Addition:</dt>
      <dd>06/08/10</dd>
      <dt>Copyright Date:</dt>
      <dd itemprop="copyrightYear">2007</dd>
      <dt>Copyrighted By:</dt>
      <dd itemprop="copyrightHolder" itemtype="http://schema.org/Organization" itemscope=""><span itemprop="name">Holt, Rinehart and Winston</span></dd>
      <dt>Adult content:</dt>
      <dd><meta itemprop="isFamilyFriendly" content="true"/>No</dd>
      <dt>Language:</dt>
      <dd><meta itemprop="inLanguage" content="en-US"/>English US</dd>
      <dt>Essential Images:</dt>
      <dd>861</dd>
      <dt>Described Images:</dt>
      <dd>910</dd>
      <dt>Categories:</dt>
      <dd><span itemprop="genre">Educational Materials</span></dd>
      <dt>Grade Levels:</dt>
      <dd>Sixth grade, Seventh grade, Eighth grade</dd>
      <dt>Submitted By:</dt>
      <dd>Bookshare Staff</dd>
      <dt>NIMAC:</dt>
      <dd>This book is currently only available to public K-12 schools and organizations in the
      United States for use with students with an IEP, because it was created from files
      supplied by the NIMAC under these restrictions. Learn more in the NIMAC Support Center.</dd>
   </dl>
   <div class="bookReviews" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
      <h2>Reviews of Holt Physical Science (<span itemprop="reviewCount">0</span> reviews)</h2>
      <div class="bookReviewScore">
         <span><span itemprop="ratingValue">0</span> - No Rating Yet</span>
      </div>
   </div>
</div>

當然不只有 Book，也有像是 Moive、Article、Message 等各式各樣的 type 可供使用，其實蠻適合當成 Database schema 參考的。